import { FC, useCallback, useRef } from 'react';
import { getList, del, getDetails } from '../api';
import useColumns from './useColumns';
import { Table, Button } from 'antd';
import useSchema from './useSchema';
import QueryTable from '@/components/query-table';
import { ProTableColumns, ProTableRefProps } from '@ebonex/ebonex-ui/lib/pro-table/typing';
import { ModalForm } from '@ebonex/ebonex-ui';
import ButtonConfirm from '@/components/buttonConfirm';
import { useNavigate } from 'react-router-dom';
import JsonViewer from '@/components/jsonViewer';
export default () => {
  const tableRef = useRef<ProTableRefProps>();
  const columns = useColumns();
  const navigate = useNavigate();
  const schema = useSchema();

  const reload = useCallback(() => {
    tableRef?.current?.reload();
  }, []);
  return (
    <>
      <QueryTable
        schema={schema}
        proTableRef={tableRef}
        request={getList}
        operators={(value, record, index) => [
          <ButtonConfirm
            buttonText="删除"
            type="link"
            danger
            onSuccess={reload}
            request={() => del(record?.id)}
          />,
          <Button
            type="link"
            onClick={() => {
              navigate(`/article/add?id=${record?.id}`);
            }}
          >
            修改
          </Button>,
          <Button href={`/preview/${record?.id}`} type="link">
            预览
          </Button>,
          <JsonViewer request={() => getDetails(record?.id)} />,
        ]}
        toolBarRender={[
          <Button
            type="primary"
            onClick={() => {
              navigate(`/article/add`);
            }}
          >
            新增
          </Button>,
        ]}
        columns={columns}
      />
    </>
  );
};
